<template>
  <view class="Offering">
    <!-- <view class="sec1">
      <image class="covimg" :src="img + gfList.cover_image" mode="aspectFit" />
      <view class="title">{{ gfList.title }}</view>
      <text class="des">{{ gfList.description }}</text>
    </view>
    <view class="sec2">
      <view class="title">我要供奉</view>
      <view class="inputs">
        <text>联 系 人:</text>
        <input type="text" v-model="name" placeholder="请输入联系人姓名" />
      </view>
      <view class="inputs">
        <text>联系方式:</text>
        <input
          type="number"
          maxlength="11"
          v-model="phone"
          placeholder="请输入联系人电话"
        />
      </view>
      <view class="inputs">
        <text>供奉金额:</text>
        <input
          type="number"
          v-model="amount"
          placeholder="请输入供奉金额面值"
        />
      </view>
      <view class="inputs last">
        <text>留言内容:</text>
        <textarea
          type="text"
          v-model="remark"
          placeholder="请留言"
          maxlength="50"
          @input="onCeIntroductionInput"
        />
        <text class="textSize">{{ wordsnumber }}/50</text>
      </view>
      <view class="btns" @click="offering">供奉</view>
    </view> -->
    <!-- 支付方式 -->
    <uni-popup ref="popupPay" type="bottom">
      <view class="payboxs">
        <view class="selectPopup_one">
          <image
            src="https://www.123qifu.com/onlineimages/static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <view class="zfje">
            支付金额：<text style="color: #c52b2e">{{ amount || "0" }}元</text>
          </view>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view class="pop_two" @click="changeActive(0)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/yue.png"
                mode=""
              />
              <view class="col">
                <text>余额</text>
              </view>
            </view>
            <image
              v-if="actives == 0"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(1)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/yonj.png"
                mode=""
              />
              <view class="col">
                <text>佣金</text>
              </view>
            </view>
            <image
              v-if="actives == 1"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(2)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/wechat.png"
                mode=""
              />
              <view class="col">
                <text>微信</text>
              </view>
            </view>
            <image
              v-if="actives == 2"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
        </scroll-view>
        <view class="pbtn" @click="comnfirmPay">确定</view>
      </view>
    </uni-popup>
    <!-- 交易密码弹窗 -->
    <uni-popup ref="popPasword" type="bottom">
      <view class="boxs boxss">
        <view class="selectPopup_one">
          <image
            src="https://www.123qifu.com/onlineimages/static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <text style="margin: 0 auto">请输入支付密码</text>
        </view>
        <validcode
          ref="pwd"
          :maxlength="6"
          :isPwd="true"
          @finish="getPwd"
          @clear="clear"
        ></validcode>
      </view>
    </uni-popup>
    <uni-popup ref="popsuccue" type="center">
      <view class="popsuccue">
        <view class="txt">{{ text }}</view>
        <view class="btn" @click="cancell">确定</view>
        <view class="close" @click="cancell"></view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wordsnumber: 0,
      name: "", // 姓名
      phone: "", // 联系电话
      remark: "", // 留言
      amount: "", // 供奉金额
      orderList: "", // 订单号
      rules: {
        phone: {
          rule: /^1[3456789]\d{9}$/,
          msg: "电话号码格式错误",
        },
        name: {
          rule: /\S/,
          msg: "联系人不能为空",
        },
        amount: {
          rule: /\S/,
          msg: "供奉金额不能为空",
        },
      },
      token: "",
      id: "", // 供奉id
      toView: "",
      actives: 2, // 支付方式
      orderCode: "", //订单编号
      payment: "wx", // 支付方式
      payPassword: "", // 支付密码
      isCommission: "0", // 非必传,默认为0,是否为佣金支付:0=否,1=是
      text: "",
      userInfo: "",
      gfList: "",
      img: "https://www.123qifu.com/",
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.token = uni.getStorageSync("token");
    this.userInfo = uni.getStorageSync("userInfo");
  },
  onShow() {
    this.getuserInfo();
    let that = this;
    uni.getStorage({
      key: "gfList",
      success: function (res) {
        that.gfList = res.data;
      },
    });
  },
  methods: {
    onCeIntroductionInput(event) {
      this.wordsnumber = event.detail.cursor;
    },
    // 获取用户信息
    async getuserInfo() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/getUserInfo",
        method: "GET",
        data: {},
      });
      if (res.data.code == 1) {
        that.userInfo = res.data.data;
        uni.setStorageSync("userInfo", res.data.data);
      }
    },
    // 判断验证是否符合要求
    validate(key) {
      let bool = true;
      if (!this.rules[key].rule.test(this[key])) {
        uni.showToast({
          title: this.rules[key].msg,
          icon: "none",
        });
        // 取反
        bool = false;
        return false;
      }
      return bool;
    },
    // 供奉
    async offering() {
      if (!this.validate("name")) return;
      if (!this.validate("phone")) return;
      if (!this.validate("amount")) return;

      const res = await this.$myRequest({
        url: "user/add_Offering",
        method: "POST",
        header: {
          token: this.token,
        },
        data: {
          pray_id: this.id,
          contacts_name: this.name,
          contacts_phone: this.phone,
          offering_amount: this.amount,
          remark: this.remark,
        },
      });
      if (res.data.code == 1) {
        let that = this;
        that.orderCode = res.data.msg;
        this.$refs.popupPay.open(); // 选择支付方式
      }
    },
    //选择支付方式
    changeActive(id) {
      this.actives = id;
      if (id == 0) {
        this.isCommission = 0;
      } else if (id == 1) {
        this.isCommission = 1;
      } else if (id == 2) {
        this.payment = "wx";
      }
    },
    // 确定支付
    comnfirmPay() {
      this.$refs.popupPay.close();
      if (this.actives == 0 || this.actives == 1) {
        // 判断是否设置支付密码
        if (this.userInfo.isSetPayPassword) {
          // 余额和佣金支付需要支付密码
          this.$refs.popPasword.open();
        } else {
          uni.showToast({
            title: "请先设置支付密码",
            icon: "none",
          });
          setTimeout(function () {
            uni.navigateTo({
              url: "../../../orderPackages/pages/balance/balance",
            });
          }, 1000);
        }
      } else {
        this.h5Pay(); // 微信支付
      }
    },
    // 清楚支付密码
    clickParent() {
      this.$refs.pwd.clear();
    },
    // 支付密码输入完成
    getPwd(val) {
      this.moneyPay(val);
    },
    async moneyPay(val) {
      const res = await this.$myRequest({
        url: "pay/moneyPay",
        method: "POST",
        data: {
          orderCode: this.orderCode,
          isCommission: this.isCommission,
          payPassword: val,
        },
      });
      if (res.data.code == 1) {
        this.text = res.data.msg;
        this.$refs.popPasword.close();
        this.$refs.popsuccue.open();
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
    // 微信支付
    async h5Pay() {
      let that = this;
      const datas = await this.$myRequest({
        url: "pay/wx_pay",
        method: "POST",
        data: {
          order_sn: this.orderCode, //订单号
          fromByXcx: 1,
        },
      });
      if (datas.data.code == 1) {
        wx.requestPayment({
          appId: datas.data.data.appId, //公众号名称，由商户传入
          timeStamp: datas.data.data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: datas.data.data.nonceStr, //随机串
          package: datas.data.data.package,
          signType: datas.data.data.signType, //微信签名方式：
          paySign: datas.data.data.paySign, //微信签名
          success: function (res) {
            if (res.errMsg == "requestPayment:ok") {
              uni.request({
                url: "https://www.123qifu.com/api/pay/weixin_getList",
                method: "POST",
                header: {
                  token: that.token,
                },
                data: {
                  order_sn: that.orderCode,
                  fromByXcx: 1,
                },
                success: (res) => {
                  if (res.data.code == 1) {
                    that.text = res.data.msg;
                    that.$refs.popsuccue.open();
                  } else {
                    uni.showToast({
                      title: res.data.msg,
                      icon: "none",
                    });
                  }
                },
              });
            }
          },
          fail: function (res) {},
          complete: function (res) {},
        });
      }
    },
    // 关闭弹窗
    cancell() {
      this.$refs.popupPay.close();
      this.$refs.popPasword.close();
      this.$refs.popsuccue.close();
      this.clickParent();
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  width: 750rpx;
  background-color: #fff;
}
.Offering {
  .sec1 {
    width: 100%;
    min-height: 560rpx;
    background: #f4f4f4;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 30rpx 34rpx;
    .covimg {
      display: block;
      width: 360rpx;
      height: 400rpx;
      margin: 40rpx auto 0;
    }
    .title {
      text-align: center;
      font-size: 30rpx;
      font-weight: 500;
      color: #373737;
      margin-top: 28rpx;
    }
    .des {
      text-indent: 2em;
      display: block;
      box-sizing: border-box;
      margin: 19rpx auto;
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      line-height: 45rpx;
      text-align: justify;
    }
  }
  .sec2 {
    width: 100%;
    min-height: 700rpx;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 50rpx;
    .title {
      text-align: center;
      font-size: 34rpx;
      font-weight: 500;
      color: #c52b2e;
      margin-top: 78rpx;
      position: relative;
      margin-bottom: 66rpx;
    }
    .title::before {
      position: absolute;
      content: "";
      width: 100rpx;
      height: 2rpx;
      background: #c52b2e;
      left: 130rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .title::after {
      position: absolute;
      content: "";
      width: 100rpx;
      height: 2rpx;
      background: #c52b2e;
      right: 130rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .inputs {
      width: 100%;
      margin: 0 auto 40rpx;
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.last {
        align-items: flex-start;
      }
      > text {
        display: block;
        width: 110rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        margin-right: 29rpx;
        white-space: nowrap;
        text-align: justify;
      }
      input {
        width: 500rpx;
        height: 52rpx;
        border: 1rpx solid #e8e8e8;
        border-radius: 4rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        box-sizing: border-box;
        padding: 0 20rpx;
      }
      input::-webkit-input-placeholder {
        color: #999999;
      }
      textarea {
        display: block;
        width: 500rpx;
        height: 152rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        border: 1rpx solid #e8e8e8;
        border-radius: 4rpx;
        box-sizing: border-box;
        padding: 10rpx;
      }
      .textSize {
        position: absolute;
        text-align: right;
        right: 0;
        bottom: 20rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
      }
    }
    .btns {
      width: 350rpx;
      height: 74rpx;
      background: #c52b2e;
      border-radius: 37rpx;
      text-align: center;
      line-height: 74rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #ffffff;
      margin: 80rpx auto;
    }
  }
  .payboxs {
    width: 100%;
    height: 700rpx;
    background-color: #ffffff;
    border-radius: 40rpx 40rpx 0 0;
    .zfje {
      font-size: 34rpx;
      font-weight: 500;
      color: #333333;
      text-align: center;
      padding: 30rpx;
    }
    .selectPopup_one {
      display: flex;
      align-items: center;
      height: 40rpx;
      width: 100%;
      font-size: 28rpx;
      color: #333333;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #e0e0e0;
      position: relative;
      .clos {
        width: 24rpx;
        position: relative;
        left: 39rpx;
      }
      .zfje {
        width: 100%;
        text-align: center;
      }
    }
    .pop_two {
      width: 690rpx;
      height: 100rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      .left {
        font-size: 30rpx;
        color: #333333;
        display: flex;
        align-items: center;
        .img {
          display: block;
          width: 60rpx;
          height: 60rpx;
          margin-right: 20rpx;
        }
        .col {
          text {
            display: block;
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      > .img {
        display: block;
        width: 34rpx;
        height: 34rpx;
      }
    }
    .pop_two:last-of-type {
      border-bottom: none;
    }
    .pbtn {
      width: 250rpx;
      height: 66rpx;
      text-align: center;
      line-height: 66rpx;
      background: #c52b2e;
      border-radius: 40rpx;
      font-size: 30rpx;
      color: #ffffff;
      margin: 70rpx auto 0;
    }
  }
  .boxs {
    width: 100%;
    height: 1000rpx;
    background-color: #ffffff;
    border-radius: 40rpx 40rpx 0 0;
    &.boxss {
      height: 500rpx;
      .selectPopup_one {
        margin-bottom: 50rpx;
        text {
          font-size: 34rpx;
          font-weight: 500;
          color: #333333;
        }
      }
    }
    .selectPopup_one {
      display: flex;
      align-items: center;
      height: 40rpx;
      width: 100%;
      font-size: 28rpx;
      color: #333333;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #e0e0e0;
      position: relative;
      .clos {
        width: 24rpx;
        position: relative;
        left: 39rpx;
      }
    }
    .scroll-y {
      height: 90%;
    }
    .xiaofei {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 690rpx;
      margin: 50rpx auto 0;
      padding-bottom: 40rpx;
      border-bottom: 1px dashed;
      .fukuan {
        display: flex;
        align-items: center;
      }
    }
    .xiaofei:last-of-type {
      border-bottom: none;
    }
  }
  .popsuccue {
    width: 478rpx;
    min-height: 506rpx;
    background: url("https://www.123qifu.com/onlineimages/static/popBg.png")
      no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding-top: 1rpx;
    border-radius: 20rpx;
    position: relative;
    .txt {
      width: 100%;
      text-align: center;
      font-size: 26rpx;
      color: #333333;
      margin-top: 295rpx;
      box-sizing: border-box;
      padding: 0 65rpx;
    }
    .btn {
      width: 250rpx;
      height: 66rpx;
      background: #c52b2e;
      border-radius: 33rpx;
      text-align: center;
      line-height: 66rpx;
      font-size: 30rpx;
      color: #ffffff;
      margin: 36rpx auto;
    }
    .close {
      position: absolute;
      width: 66rpx;
      min-height: 66rpx;
      background: url("https://www.123qifu.com/onlineimages/static/popclose.png")
        no-repeat;
      background-size: 100% 100%;
      bottom: -100rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
